* {
    margin:0;
    padding:0;
}

nav, footer {
    -moz-box-shadow: 0px 0px 10px #000;
    -webkit-box-shadow: 0px 0px 10px #000;
    box-shadow: 0px 0px 20px #000000;
    margin:20px auto;
    width:90%;
    max-width:1000px;
    background: #000;
}
 
nav ul {
    list-style:none;
}
 
nav > ul {
    display:table;
    width:100%;
    background:#000;
    position:relative;
}
 
nav > ul li {
    display:table-cell;
    overflow: hidden;
}
 
/*Sub-menu*/
nav > ul > li:hover > ul {
    display:block;
    height:100%;
}
 
nav > ul > li > ul {
    display:block;
    position:absolute;
    background:#424242;
    overflow:hidden;
    height:0%;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
 
nav > ul li a {
    color:#fff;
    display:block;
    line-height:20px;
    padding:20px;
    position: relative;
    text-align:center;
    text-decoration:none;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
 
nav > ul > li > ul > li a:hover {
    background:#FFBF00;
}
 
nav > ul > li > a span {
    background:#174459;
    display:block;
    height:100%;
    width:100%;
    left:0;
    position:absolute;
    top:-55px;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
 
nav > ul > li > a span .icon {
    font-size: 20px;
    display:block;
    line-height:60px;
}
 
nav > ul > li > a:hover > span {
    top:0;
}
nav > ul > li > a:active > span{
    top: 5;
}
 
/*Colores*/
nav ul li a .primero {
    background:#B18904;
}
 
nav ul li a .segundo {
    background:#B18904;
}
nav ul li a .tercero {
    background:#B18904;
}
nav {
    font-weight: bold;
}
